<template>
    <div class="content-right my-test-list">
        <Card shadow>
        	<!--添加试卷按钮-->
            <router-link :to="{name:'add-test'}">
            	<Button type="primary" icon="plus-round">
	            	添加试卷
	            </Button>
            </router-link>
            <!--搜索-->
            <Form ref="formInline" :model="formInline"  inline @keyup.enter.native="enterSubmit">
            	<Row :gutter="16">
            		<Col span="6">
		        		<Input v-model="formInline.keywords" placeholder="请输入试卷排序/名称关键字"></Input>
		        	</Col>
		        	<Col span="4">
			            <Select v-model="formInline.type" placeholder="试卷类型" clearable>
					        <Option v-for="item in testType" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col span="4">
					    <Select v-model="formInline.status" placeholder="试卷状态" clearable>
					        <Option v-for="item in testStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col span="3">
		            	<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
		            </Col>
		        </Row>
		    </Form>
		    <!--表格-->
		    <div>
		        <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change='selectedNum'></Table>
                <div class="button-wrap">
                    <Checkbox @on-change="handleSelectAll()" v-model='checkboxStatus'>全选</Checkbox>
    		        <Button @click="allStatus(false)">禁用</Button>
    		        <Button @click="allStatus(true)">启用</Button>
    		        <Button @click="delData">删除</Button>
    		        <Button @click="exportData">导出数据</Button>
                    <Page :total="pageTotal" show-elevator show-total :current.sync="currentPage" @on-change='jumpPage'></Page>
                </div>
		    </div>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import { columns4 } from './data/tabel-data.js';
import util from '@/libs/util.js';
export default {
	components:{
		
	},
    data() {
        return {
        	//搜索表单
            checkboxStatus:false,
            //表单页面
        	formInline: {
                keywords: '',
                type: '',
                status:"",
          	},
          	//表单搜索
          	formInlineData: {
                keywords: '',
                type: '',
                status:"",
          	},
          	//试卷类型的type
            testType: [
                {
                    value: "1",
                    label: '模拟试卷'
                },
                {
                    value: "2",
                    label: '正式试卷'
                },
                {
                    value: "3",
                    label: '公用试卷'
                }
            ],
            //试卷状态
            testStatus: [
                {
                    value: "1",
                    label: '已启用'
                },
                {
                    value: "0",
                    label: '已禁用'
                }
            ],
            //表格的数据
            columns4:columns4,
            data1: [],
            //总共条数，为了分页
            pageTotal:0,
            currentPage:1,
            //获取checkbox选中条数的ID,为了批量操作
            selectedAllNum:[],
            //获取checkbox选中条数的内容列表,为了导出数据功能
            selectedAllList:[],
        }
    },
    created:function(){
    	this.loadData()
    },
    watch:{
    	//监听路由
    	'$route':function(){
            this.loadData();
        }
    },
    methods: {
    	//表单提交搜索
		handleSubmit() {
			this.formInlineData.keywords=this.formInline.keywords;
			this.formInlineData.type=this.formInline.type;
			this.formInlineData.status=this.formInline.status;
            this.currentPage=1;
            this.loadData()
       	},
        //表单提交搜索——回车触发
        enterSubmit:function(){
        	this.handleSubmit()
        },
		//表格全选的方法
		handleSelectAll() {
			this.$refs.selection.selectAll(this.checkboxStatus);
        },
        //获取当前列表的数据
        loadData:function(){
	       	var that=this;
            var keywords1=that.formInlineData.keywords==''?'':("&keywords="+that.formInlineData.keywords);
            var type1=(that.formInlineData.type==''||that.formInlineData.type==undefined)?'':("&type="+that.formInlineData.type);
            var status1=(that.formInlineData.status==''||that.formInlineData.status==undefined)?'':("&status="+that.formInlineData.status);
	    	this.axios({
	    		method:'get',
	    		url:that.$store.state.app.globalUrl+'/admin/TestPaper/index?size='+10+'&page='+that.currentPage+keywords1+type1+status1,
	    	}).then(function(res){
	    		if(that.checkboxStatus==true){
                    that.checkboxStatus=false
                }
	    		//刷新页面之后让checkbox选中的内容清空
                that.selectedAllNum=[];
                that.selectedAllList=[];
                //保存返回的数据
				that.data1=res.data.data.list;
                that.pageTotal=parseInt(res.data.data.count);
	    	});
       },
	    //获取checkbox选中条数
	    selectedNum:function(page){
            // 完善全选功能
            if(page.length==this.data1.length){
                this.checkboxStatus=true;
            }else{
                this.checkboxStatus=false;
            }
	    	var that=this;
            // 导出的数据与获取选中的checkbox
            that.selectedAllList=[];
            that.selectedAllNum=[];
            that.selectedAllList=page;
	    	page.forEach(function(page){
	    		that.selectedAllNum.push(page.Id)	
			})
	    },
	    //批量禁用与启用
	    allStatus:function(flag){
            if(this.selectedAllList.length>0){
    	    	var that=this;
    	    	this.axios({
    				method:'get',
    				url:that.$store.state.app.globalUrl+"/admin/TestPaper/changeStatus?id="+that.selectedAllNum.join(',')+'&status='+(flag?'1':'0'),
    				data:{}
    			}).then(function(res){
    				if(res.data.msg=="操作成功"){
    					that.$Message.success(flag?'已启用':'已禁用');
    					that.$router.push({
    						name:'test-management',
    						query:{time:Date.parse(new Date())}
    					})
    				}else{
    					that.$Message.error('操作失败');
    				}
    			});
            }else{
                this.$Message.error('未选择数据');
            }
	    },
        // 批量删除
        delData:function(){
            if(this.selectedAllList.length>0){
                var that=this;
                this.$Modal.confirm({
                    content: '<h4>确定删除？</h4>',
                    onOk: () => {
                        this.axios({
                            method:'get',
                            url:that.$store.state.app.globalUrl+"/admin/TestPaper/del?id="+that.selectedAllNum.join(','),
                            data:{}
                        }).then(function(res){
                            if(res.data.msg=="操作成功"){
                                that.$Message.success('已删除');
                                that.$router.push({
                                    name:'test-management',
                                    query:{time:Date.parse(new Date())}
                                })
                            }else{
                                that.$Message.error('操作失败');
                            }
                            
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                })
            }else{
                this.$Message.error('未选择数据');
            }
        },
        // 导出数据
        exportData:function(){
            if(this.selectedAllList.length>0){
            	console.log()
            	var columnsArr=[
	            	{title: 'ID',key: 'Id'},
	            	{title: '试卷名称',key: 'name'},
	            	{title: '试卷类型',key: 'type'},
	            	{title: '更新时间',key: 'updateTime'},
	            	{title: '试卷状态',key: 'status'},
	            	];
            	var selectedAllListData=[];
            	this.selectedAllList.forEach(function(v){
            		var obj={
            			Id:v.Id,
            			name:v.name,
            			type:(v.type=='1'?"模拟试卷":(v.type=="2"?"正式试卷":"公用试卷")),
            			updateTime:util.timestampToTime(v.updateTime),
            			status:(v.status=='1'?'已启用':'已禁用')
            		}
            		selectedAllListData.push(obj)
            	})
            	this.$refs.selection.exportCsv({
            	    filename: '试卷列表',
            	    columns:columnsArr,
            	    data:selectedAllListData
            	});
            	this.$router.push({
					name:'test-management',
					query:{time:Date.parse(new Date())}
				})

            }else{
            	this.$Message.error('未选择数据');
            }
        },
        // 分页
        jumpPage:function(page){
            this.currentPage=page;
            this.loadData();
        }
    }
};
</script>
<style>
/*搜索框*/
.my-test-list .ivu-form{margin: 20px 0;}
.my-test-list .ivu-form .ivu-select-selection{text-align: center;}
.my-test-list .ivu-form .ivu-select-dropdown{text-align: center;}
.my-test-list .ivu-switch span{font-size: 10px;}
.my-test-list .ivu-table-wrapper{margin-bottom: 10px;}
.my-test-list .ivu-table-column-center .ivu-btn{margin: 2px;}
.my-test-list .button-wrap{overflow: hidden;padding: 10px 0;}
.my-test-list .button-wrap .ivu-page{float: right;}
</style>